<template>
  <el-image-viewer
    v-if="isShowViewer"
    :ref="changeRef"
    :z-index="999"
    :url-list="urlList"
    v-bind="getBindValue"
    @close="handleCloseViewer"
  >
    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps"></slot>
    </template>
  </el-image-viewer>
</template>

<script lang="ts" setup>
import { ZImageViewerInstance, ZImageViewerProps } from '../types/zImageViewer'

defineOptions({ name: 'ZImageViewer', inheritAttrs: false })

const props = withDefaults(defineProps<ZImageViewerProps>(), {
  urlList: () => []
})

const vm = getCurrentInstance()
const getBindValue = computed(() => {
  const delArr: string[] = ['urlList']
  const attrs = useAttrs()
  const obj = { ...attrs }
  Object.assign(obj, props)
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1 || key.startsWith('isShowViewer')) {
      delete obj[key]
    }
  }
  return obj
})

const isShowViewer = defineModel('isShowViewer', {
  type: Boolean,
  default: false
})

const handleCloseViewer = () => {
  isShowViewer.value = false
}

const changeRef = (ImageViewerInstance: Record<string, any> | null) => {
  if (vm) {
    vm.exposeProxy = vm.exposed = Object.assign(
      ImageViewerInstance || {},
      {} // 这里写暴露的方法
    ) as ZImageViewerInstance
  }
}

defineExpose((vm?.exposeProxy || {}) as ZImageViewerInstance)
</script>
